<template>
	<view class="back-banner">
		<view class="header">
			<view class="userinfo">
				<view class="face" @tap="replaceAvatar">
					<image :src="userinfo.headIcon"></image>
				</view>
				<view class="info">
					<view class="username">{{userinfo.realName}}</view>
					<view class="usernike">编号：{{userinfo.account}}</view>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view style="height: 140rpx;">
				<view class="icon-ym icon-ym-scanCode postname" style="color: #FFFFFF;font-size: 55rpx;" @tap="scanning()"></view>
			</view>
			<!-- #endif -->
		</view>
		
		<view class="userinfo_center">
			<view class="userstaff ">
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-gongsi"></text>公司</view>
						<view class="postname">{{userinfo.organizeName == null ? '': userinfo.organizeName }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-bumen"></text>部门</view>
						<view class="postname">{{userinfo.departmentName == null ? '': userinfo.departmentName }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-gangwei"></text>岗位</view>
						<view class="postname">{{userinfo.positionName == null ? '': userinfo.positionName }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo">
						<view class="staffname"><text class="iconfont icon-ym-jaose"></text>角色</view>
						<view class="postname">{{userinfo.roleName == null ? '': userinfo.roleName }}</view>
					</view>
				</view>
			</view>
			<view class="userstaff ">
				<view class="staff" @tap="togglePopup">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-ym-erweima"></text>二维码</view>
						<view class="iconfont icon-ym-erweima font-size20 postname"></view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-xingbie"></text>性别</view>
						<view class="postname">{{userinfo.gender == null ? '': userinfo.gender }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-shengri"></text>生日</view>
						<view class="postname">{{userinfo.birthday == null ? '': userinfo.birthday }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo border-bottom-E3E3E5">
						<view class="staffname"><text class="iconfont icon-ym-shouji"></text>手机</view>
						<view class="postname">{{userinfo.mobilePhone == null ? '': userinfo.mobilePhone }}</view>
					</view>
				</view>
				<view class="staff">
					<view class="staffinfo">
						<view class="staffname"><text class="iconfont icon-youxiang1"></text>邮箱</view>
						<view class="postname">{{userinfo.email == null? '': userinfo.email}}</view>
					</view>
				</view>
			</view>
			<view class="userstaff">
				<view class="staff" @tap="contactUs">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-ym-lianxiwomen"></text><label>联系我们</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<view class="staff" @tap="aboutUs">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-ym-yingyongjieshao"></text><label>应用介绍</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="staff" @tap="accountSecurity">
					<view class="staffinfo border-bottom-E3E3E5" hover-class="uni-list-cell-hover">
						<view class="staffname"><text class="iconfont icon-zhanghaoanquan"></text><label>账号安全</label></view>
						<view class="advanceicon iconfont icon-xiangyou"></view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="exit-btn">
				<view class="btn-exit" @click="defaultlogout" hover-class="uni-list-cell-hover">退出登录</view>
			</view>
		</view>
		
		
		<uni-popup type="center" mode="insert" :mask-click="true" ref="popup">
			<view class="popup-box">
				<view class="us-info">
					<image :src="userinfo.userIcon" mode="aspectFill" class="face"></image>
					<view class="info">
						<view class="username">{{userinfo.realName}}</view>
						<view class="usernike">{{userinfo.userAccount}}</view>
					</view>
				</view>
				<view class="qrimg">
					<tki-qrcode v-if="ifShow" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground"
					 :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :showLoading='false'
					 :usingComponents="true" @result="qrR" />
				</view>
				<button class="popup-btn btn-save" @click="saveQrcode()">保存到手机</button>
				<button class="popup-btn cancel" @click="cancel()">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	import uniPopup from '../extendModule/uni-popup/uni-popup.vue'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			uniPopup,
			tkiQrcode
		},
		data() {
			return {
				userinfo: {},
				companyName: '',
				organizeName: '',
				cachesize: '',
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const _this = this;
			// #ifndef MP-ALIPAY
			uni.getStorageInfo({
				success: function(res) {
					_this.cachesize = helper.getfilesize(res.currentSize);
				}
			});
			// #endif
			try {
				const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');
				let apiKey = uni.getStorageSync('apiKey') || 'api';
				let baseUrlObj = config.Global.baseUrl;
				let baseUrl = config.Global.baseUrl[apiKey].apiUrl;
				if (userProvider) {
					this.userinfo = userProvider
					console.log('我的页面',this.userinfo)
					this.userinfo.headIcon = baseUrl + userProvider.headIcon;
					this.userinfo.gender = userProvider.gender === 1 ? '男' : (userProvider.gender === 2 ? '女' : '保密');
					this.userinfo.birthday = helper.toDate(userProvider.birthday, 'yyyy-MM-dd');
					
				}
			} catch (e) {}
			uni.hideLoading();
		},
		methods: {
			...mapMutations(['logout']),
			defaultlogout() {
				uni.showModal({
					// title: '提示',
					content: '确定退出当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							helper.ajax({
								url: '/api/Common/Login/Logout',
								method: 'GET',
								data: '',
								complete: (e) => {
									this.$store.state.wschat.recentlys.length = 0;
									uni.removeStorage({
										key: config.Global.cache + '_Token',
									});
									uni.removeStorage({
										key: config.Global.cache + '_UserProvider',
									});
									uni.removeStorage({
										key: config.Global.cache + '_ApplyMenu',
									});
									uni.removeStorage({
										key: config.Global.cache + '_appsoftware_key'
									});
									uni.removeStorage({
										key: config.Global.cache + '_FlowEngineList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_DictionaryList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_OrganizeList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_RoleList'
									});
									uni.removeStorage({
										key: config.Global.cache + '_PositionList'
									});
									uni.removeStorageSync('apiKey');
									if (this.$store.state.wschat.socketState) {
										uni.closeSocket();
										this.$store.state.wschat.socketState = false;
									}
									this.isRouterAlive = false
									this.$nextTick(function() {
										this.isRouterAlive = true
									})
									this.logout();
									if (!this.islogin) {
										uni.reLaunch({
											url: '/pages/users/sign-in/sign-in',
										});
									}
								}
							});
						}
					},
				})
			},
			aboutUs() {
				uni.navigateTo({
					url: '../correlation/about-us/about-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			contactUs() {
				uni.navigateTo({
					url: '../correlation/contact-us/contact-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			qrcodeus() {
				uni.navigateTo({
					url: '../correlation/qrcode-us/qrcode-us',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// #ifdef APP-PLUS
			accountSecurity() {
				uni.navigateTo({
					url: '../correlation/account-security/account-security',
				})
			},
			// #endif
			/* 扫码事件 */
			scanning(){
				uni.scanCode({
				    onlyFromCamera: false,/* 是否只能从相机扫码，不允许从相册选择图片 */
				    success: function (res) {
				        // console.log('条码内容：' + res.result);
						let scanResult = JSON.parse(res.result)
						scanResult.status = 'preview'
						
						if(scanResult.type == 'appDesignPreview'){
							uni.navigateTo({
								url:'../../apply/apply/features/index?id='+scanResult.id+'&type=preview',
							})
						}
				    }
				});
			},
			replaceAvatar() {
				let apiKey = uni.getStorageSync('apiKey') || 'api';				let baseUrlObj = config.Global.baseUrl;
				let baseUrl = config.Global.baseUrl[apiKey].apiUrl;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						try {
							const token = uni.getStorageSync(config.Global.cache + '_Token');
							if (token) {
								uni.uploadFile({
									url: baseUrl + '/api/Common/Uploader/userAvatar',
									filePath: res.tempFilePaths[0],
									name: 'file',
									formData: {
										"Authorize": token
									},
									success: (res) => {
										if (res.statusCode == 200) {
											this.userinfo.url = baseUrl + res.url;
										}
									},
									fail(err) {
										helper.msg('上传失败');
									}
								});
							}
						} catch (e) {}
					}
				})
			},
			togglePopup() {
				this.val = this.userinfo.userAccount + '_' + this.userinfo.mobilePhone
				// #ifndef APP-PLUS
				uni.getImageInfo({
					src: this.userinfo.userIcon,
					success: res => {
						this.icon = res.path;
					}
				});
				// #endif
				// #ifdef APP-PLUS
				this.icon = this.userinfo.userIcon;
				// #endif 
				this.$refs.popup.open();
			},
			cancel() {
				this.$refs.popup.close()
			},
			saveQrcode() {
				// #ifdef MP-ALIPAY
				this.$refs.popup.$refs.qrcode._saveCode()
				// #endif
				// #ifndef MP-ALIPAY
				this.$refs.qrcode._saveCode()
				// #endif
			},
			qrR(res) {
				this.src = res;
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F3
	}

	.back-banner {
		position: relative;
		background-position: top;
		// background-size: 100% 25%;
	}

	.header {
		background-color: #3281ff;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		
		&.status {
			padding-top: var(--status-bar-height);
		}

		width:100%;
		padding: 160rpx 2.5% 0;
		box-sizing: border-box;
		height:368upx;
		margin-bottom: -90upx;

		.userinfo {
			width: 90%;
			display: flex;
			.face {
				flex-shrink: 0;
				width: 16vw;
				height: 16vw;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				align-items: center;
				flex-direction: column;
				// margin-left: 23upx;

				.username {
					width: 100%;
					font-size: 36rpx;
					font-weight: bolder;
					font-weight: normal;
					color: #FFFFFF;
				}

				.usernike {
					display: flex;
					align-items: center;
					height: 40upx;
					font-size: 28rpx;
					color: #FFFFFF;
					border-radius: 20upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			color: #9A9A9A;
		}
	}

	.hover {
		background-color: #eee
	}
	
	.userinfo_center{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	}
	.userstaff {
		width: 95%;
		margin: 20rpx auto 0;
		border-radius: 20rpx;
		overflow: hidden;

		.staff {
			width: 100%;
			height: 96rpx;
			display: flex;
			background-color: #fff;
			align-items: center;

			.staffinfo {
				width: 91%;
				height: 100%;
				font-size: 28rpx;
				display: flex;
				vertical-align: hiddle;
				margin-left: 30rpx;
				align-items: center;
				justify-content: space-between;

				.staffname {
					width: 30%;
					display: flex;
					// flex-flow: wrap;
					white-space: nowrap;
					align-items: center;
					color: #3A3A3A;
					font-size: 32rpx;

					// font-weight: bolder;
					& .iconfont {
						color: #3281ff;
						width: 52rpx;
						font-size: 38rpx;
						text-align: center;
						font-weight: normal;
						margin-right: 10rpx;
					}
				}

				.iconfont {
					color: #9A9A9A;
					width: auto;
				}

				.postname {
					width: 75%;
					flex-shrink: 0;
					// height: 6vw;
					text-align: right;
					color: #9A9A9A;
				}
			}
		}
	}

	.formgroup {
		padding-left: 40upx;
	}

	.controlvalue {
		width: 68% !important;
	}

	.btnlogout {
		color: #FF0000;
		background-color: #fff;
		border: 0;
		font-weight: 600
	}

	button::after {
		border: none;
	}

	.exit-btn {
		width: 95%;
		height: 90rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid #eee;

		.btn-exit {
			height: 100%;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #3281ff;
			background: #fff;
			text-align: center;

		}
	}

	.popup-box {
		background-color: #fff;
		width: 554upx;
		height: 800upx;
		border-radius: 10upx;
		padding: 34upx 56upx 0;
		box-sizing: border-box;

		.us-info {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 70upx;
			margin-bottom: 10upx;

			.face {
				height: 60upx;
				width: 60upx;
				border-radius: 50%;
				margin-right: 28upx;
			}

			.info {

				.username,
				.usernike {
					line-height: 35upx;
				}

				.username {
					color: #252B3A;
					font-size: 28upx;
				}

				.usernike {
					color: #666666;
					font-size: 24upx;
				}
			}

		}

		.qrimg {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 10upx;
		}

		.popup-btn {
			margin-bottom: 32upx;
			background-color: #fff;
			color: #3281FF;
			border: 1upx solid #3281FF;
			box-sizing: border-box;

			&.btn-save {
				background-color: #3281FF;
				color: #fff;
			}
		}
	}
</style>
